<template>
	<view class="contanier">
		<!-- 自定义悠米logo组件 -->
		<ym-logo></ym-logo>
		<!-- 自定义搜索组件 -->
		<my-search @searchClick="gotoSearchDetails"></my-search>
		<!-- 滚动标题 -->
		<community-nav-list :navList="classifyTextObj" :active="active" :widths='"60%"' @clickIndex="getClickIndexHandle"></community-nav-list>
			<scroll-view class="content" v-show="active === 0" scroll-y enhanced :show-scrollbar="false" :style="{ height: contentHeight + 'px' }"
				@scrolltolower="lowerBottom('community')"  refresher-enabled @refresherrefresh="refresherrefreshHandle('community')" :refresher-triggered="pullDownState" lower-threshold="100">
				<view v-for="item in communityInitialArray" :key="item.user.userId" class="communitybox" v-if='communityInitialArray.length !== 0 && !pullDownState'>
					<public-comment :commentObject="item" @clickId="disposeId" >
					</public-comment>
				</view>
				<view
					v-if="communityQueryObj.totalPageNumber >= 1 && communityQueryObj.pagenum == communityQueryObj.totalPageNumber && !requestState"
					class="noData">
					已全部加载
				</view>
				<!-- 加载中 -->
				<view v-show="requestState && !pagingState && !pullDownState" class="paging">
					<van-loading size="24px">加载中...</van-loading>
				</view>
				<view v-if="communityInitialArray.length === 0 && !requestState " class="noAttention">
					<van-empty description="暂无推荐文章"></van-empty>
				</view>
			</scroll-view>
			<scroll-view scroll-y enhanced :show-scrollbar="false" :style="{ height: contentHeight + 'px' }"
				@scrolltolower="lowerBottom('Attention')" lower-threshold="100" class="content" v-show="active === 1" refresher-enabled @refresherrefresh="refresherrefreshHandle('Attention')" :refresher-triggered="pullDownState">
				<view v-for="item in myAttentionArray" :key="item.user.userId" class="communitybox">
					<public-comment :commentObject="item" @clickId="disposeId1">
					</public-comment>
				</view>
				<view
					v-if="myAttentionQueryObj.totalPageNumber >= 1 && myAttentionQueryObj.pagenum == myAttentionQueryObj.totalPageNumber && !requestState"
					class="noData">
					已全部加载
				</view>
				<!-- 加载中 -->
				<view v-show="requestState && !pagingState && !pullDownState" class="paging">
					<van-loading size="24px">加载中...</van-loading>
				</view>
				<view v-if="myAttentionArray.length === 0 && !requestState " class="noAttention">
					<van-empty description="暂无关注文章"></van-empty>
				</view>
			</scroll-view>
			<scroll-view scroll-y enhanced :show-scrollbar="false" :style="{ height: contentHeight + 'px' }"
				@scrolltolower="lowerBottom('confession')" class="content" v-show="active === 2" refresher-enabled @refresherrefresh="refresherrefreshHandle('confession')" :refresher-triggered="pullDownState" lower-threshold="100">
				<view v-for="item in confessionWallArray" :key="item.user.userId" class="communitybox">
					<public-comment :commentObject="item" @clickId="disposeId2">
					</public-comment>
				</view>
				<view
					v-if="confessionQueryObj.totalPageNumber >= 1 && confessionQueryObj.pagenum == confessionQueryObj.totalPageNumber && !requestState"
					class="noData">
					已全部加载
				</view>
				<!-- 加载中 -->
				<view v-show="requestState && !pagingState && !pullDownState" class="paging">
					<van-loading size="24px">加载中...</van-loading>
				</view>
				<view v-if="confessionWallArray.length === 0 && !requestState " class="noAttention">
					<van-empty description="暂无表白文章"></van-empty>
				</view>
			</scroll-view>
			<scroll-view scroll-y enhanced :show-scrollbar="false" :style="{ height: contentHeight + 'px' }"
				@scrolltolower="lowerBottom('thePhenix')" class="content" v-show="active === 3" refresher-enabled @refresherrefresh="refresherrefreshHandle('thePhenix')" :refresher-triggered="pullDownState" lower-threshold="100">
				<view v-for="item in thePhenixArray" :key="item.user.userId" class="communitybox">
					<public-comment :commentObject="item" @clickId="disposeId3">
					</public-comment>
				</view>
				<view
					v-if="thePhenixQueryObj.totalPageNumber >= 1 && thePhenixQueryObj.pagenum == thePhenixQueryObj.totalPageNumber && !requestState"
					class="noData">
					已全部加载
				</view>
				<!-- 加载中 -->
				<view v-show="requestState && !pagingState && !pullDownState" class="paging">
					<van-loading size="24px">加载中...</van-loading>
				</view>
				<view v-if="thePhenixArray.length === 0 && !requestState " class="noAttention">
					<van-empty description="暂无专业交流文章"></van-empty>
				</view>
			</scroll-view>
		<drag-Add @dragClick='toissueCommunity'></drag-Add>
	</view>
</template>
<script>
	
	import {
		capsuleTopHeight
	} from "../../mixins/mixins.js";
	export default {
		mixins: [capsuleTopHeight],
		data() {
			return {
				active: 0,//当前选中项
				contentHeight: 0, // 滚动列表的高度
				classifyTextObj: {}, // 社区标题文本对象
				initState: false, // 判断本地存储token状态			

				communityInitialArray: [], // 综合推荐数据
				// 综合推荐分页数据
				communityQueryObj: {
					pagenum: 1, //社区当前请求的页数
					totalPageNumber: 0, //社区总分页数
					pagesize: 0, // 社区每页请求的数量
					total: 0, //总数据
				},

				// 我的关注
				myAttentionArray: [],
				myAttentionQueryObj: {
					pagenum: 1,
					totalPageNumber: 0,
					pagesize: 0,
					total: 0,
				},

				// 我的关注
				confessionWallArray: [],
				confessionQueryObj: {
					pagenum: 1,
					totalPageNumber: 0,
					pagesize: 0,
					total: 0,
				},

				thePhenixArray: [],
				thePhenixQueryObj: {
					pagenum: 1,
					totalPageNumber: 0,
					pagesize: 0,
					total: 0,
				},

				requestState: false, // 请求状态
				pagingState:false,//分页请求状态
				pullDownState:false,//当前刷新
			};
		},
		onShareAppMessage(res) {
			return {
				title: '悠米校园',
				path: '/pages/community/community',
			}
		},
		onShow() {
			if (uni.getStorageSync("userObj").token) {
				if (!this.initState) {
					this.initState = true;
					this.getCommunityClassify(); // 社区滚动标题请求
					this.communityInitialData(); // 综合推荐数据
					this.thePhenixQueryObjData() //我的关注
					this.confessionWallData() //表白墙
					this.thePhenixData() //专业交流
				}
			} else {
				uni.switchTab({
					url: "../my/my",
				});
				uni.showToast({
					title: "请先登录用户",
					duration: 1000,
					icon: "none",
				});
			}
		},
		created() {
			this.screenHeight(); //获取屏幕高度
		},
		methods: {
			// 发布社区文章
			toissueCommunity() {
				uni.navigateTo({
					url: '/subpkg/issue-community/issue-community',
				});
			},
			// 滚动标题请求
			async getCommunityClassify() {
				const {
					data: res
				} = await uni.$http.get(
					"/ym_server/article-family/logicalLabel"
				);
				this.classifyTextObj = res;
			},
			// 屏幕高度
			screenHeight() {
				const wxWindowHeight = uni.getSystemInfoSync().windowHeight;
				this.contentHeight =
					wxWindowHeight - this.capsuleHeight - this.capsuleTop - 115;
			},
			// 用户点赞操作
			disposeId(id) {
				const result = this.communityInitialArray.find(
					(item) => item.intactArticleId === id
				);
				if (result.likeStatus == true) {
					result.likeStatus = false;
					if (result.likeStatus == false) {
						result.article.likeNum -= 1;
					}
				} else {
					result.likeStatus = true;
					if (result.likeStatus == true) {
						result.article.likeNum += 1;
					}
				}
			},
			disposeId1(id) {
				const result = this.myAttentionArray.find(
					(item) => item.intactArticleId === id
				);
				if (result.likeStatus == true) {
					result.likeStatus = false;
					if (result.likeStatus == false) {
						result.article.likeNum -= 1;
					}
				} else {
					result.likeStatus = true;
					if (result.likeStatus == true) {
						result.article.likeNum += 1;
					}
				}
			},
			disposeId2(id) {
				const result = this.confessionWallArray.find(
					(item) => item.intactArticleId === id
				);
				if (result.likeStatus == true) {
					result.likeStatus = false;
					if (result.likeStatus == false) {
						result.article.likeNum -= 1;
					}
				} else {
					result.likeStatus = true;
					if (result.likeStatus == true) {
						result.article.likeNum += 1;
					}
				}
			},
			disposeId3(id) {
				const result = this.thePhenixArray.find(
					(item) => item.intactArticleId === id
				);
				if (result.likeStatus == true) {
					result.likeStatus = false;
					if (result.likeStatus == false) {
						result.article.likeNum -= 1;
					}
				} else {
					result.likeStatus = true;
					if (result.likeStatus == true) {
						result.article.likeNum += 1;
					}
				}
			},
			// 自定义搜素组件跳转
			gotoSearchDetails() {
				uni.navigateTo({
					url: `/subpkg/search-details/search-details`,
				});
			},
			// 下拉刷新事件
			refresherrefreshHandle(type){
				if (this.pullDownState) return
				this.pullDownState=true
				this.pagingState=false
				if(type==='community'){
					this.communityInitialArray=[]
					this.communityQueryObj.pagenum=1
					this.communityQueryObj.totalPageNumber=0
					this.communityQueryObj.pagesize=0
					this.communityQueryObj.total=0
					setTimeout(()=>{
						this.pullDownState=false
					},500);
					this.communityInitialData()
				}else if(type==='Attention'){
					this.myAttentionArray=[]
					this.myAttentionQueryObj.pagenum=1
					this.myAttentionQueryObj.totalPageNumber=0
					this.myAttentionQueryObj.pagesize=0
					this.myAttentionQueryObj.total=0
					setTimeout(()=>{
						this.pullDownState=false
					},500);
					this.thePhenixQueryObjData()
				}else if(type==='confession'){
					this.confessionWallArray=[]
					this.confessionQueryObj.pagenum=1
					this.confessionQueryObj.totalPageNumber=0
					this.confessionQueryObj.pagesize=0
					this.confessionQueryObj.total=0
					setTimeout(()=>{
						this.pullDownState=false
					},500);
					this.confessionWallData()
				}else{
					this.pullDownState = true
					this.thePhenixArray=[]
					this.thePhenixQueryObj.pagenum=1
					this.thePhenixQueryObj.totalPageNumber=0
					this.thePhenixQueryObj.pagesize=0
					this.thePhenixQueryObj.total=0
					setTimeout(()=>{
						this.pullDownState=false
					},500);
					this.thePhenixData()
				}
			},
			// 分页加载
			lowerBottom(type) {
				if(this.requestState) return
				if(type==='community'){
					if(this.communityQueryObj.pagenum <this.communityQueryObj.totalPageNumber){
						// this.pullDownState=true
						this.communityQueryObj.pagenum++
						this.communityInitialData(false)
					}
				}else if(type==='Attention'){
					if(this.myAttentionQueryObj.pagenum <this.myAttentionQueryObj.totalPageNumber){
						// this.pullDownState=true
						this.myAttentionQueryObj.pagenum++
						this.thePhenixQueryObjData(false)
					}
				}else if(type==='confession'){
					if(this.confessionQueryObj.pagenum <this.confessionQueryObj.totalPageNumber){
						// this.pullDownState=true
						this.confessionQueryObj.pagenum++
						this.confessionWallData(false)
					}
				}else{
					if(this.thePhenixQueryObj.pagenum <this.thePhenixQueryObj.totalPageNumber){
						// this.pullDownState=true
						this.thePhenixQueryObj.pagenum++
						this.thePhenixData(false)
					}
				}
			},
			// 综合推荐首次登录数据
			async communityInitialData(timeOutState = true) {
				this.requestState = true;
				const {
					data: res
				} = await uni.$http.get(
					`/ym_server/IntactArticle/0?page=${this.communityQueryObj.pagenum}`
				);
				if (res.code === 200 && res.data.data.records) {
					this.communityQueryObj.totalPageNumber = res.data.data.pages;
					this.communityQueryObj.pagesize = res.data.data.size;
					this.communityQueryObj.total = res.data.data.total;
					this.communityInitialArray = [...this.communityInitialArray, ...res.data.data.records];
				} else {
					this.communityInitialArray = []
					this.communityQueryObj.totalPageNumber = 0
					this.communityQueryObj.pagesize = 0
					this.communityQueryObj.total = 0
				}
				if (timeOutState) {
					setTimeout(() => {
						this.pullDownState=false
						this.requestState = false;
					}, 500)
				} else {
					this.requestState = false;
					this.pullDownState=false
				}
			},
			// 我的关注请求
			async thePhenixQueryObjData(timeOutState = true) {
				this.requestState = true;
				// 分页节流阀开启
				const {
					data: res
				} = await uni.$http.get(
					`/ym_server/IntactArticle/1?page=${this.myAttentionQueryObj.pagenum}`
				);
				if (res.code === 200 && res.data.data.records) {
					this.myAttentionQueryObj.totalPageNumber = res.data.data.pages;
					this.myAttentionQueryObj.pagesize = res.data.data.size;
					this.myAttentionQueryObj.total = res.data.data.total;
					this.myAttentionArray = [...this.myAttentionArray, ...res.data.data.records];
				} else {
					this.myAttentionArray = []
					this.myAttentionQueryObj.totalPageNumber = 0
					this.myAttentionQueryObj.pagesize = 0
					this.myAttentionQueryObj.total = 0
				}
				if (timeOutState) {
					setTimeout(() => {
						this.requestState = false;
						this.pullDownState=false
					}, 500)
				} else {
					this.requestState = false;
					this.pullDownState=false
				}
			},
			// // 表白墙
			async confessionWallData(timeOutState = true) {
				this.requestState = true;
				// 分页节流阀开启
				// this.isloading = true;
				const {
					data: res
				} = await uni.$http.get(
					`/ym_server/IntactArticle/3562519823581335567?page=${this.confessionQueryObj.pagenum}`
				);

				if (res.code === 200 && res.data.data.records) {
					this.confessionQueryObj.totalPageNumber = res.data.data.pages;
					this.confessionQueryObj.pagesize = res.data.data.size;
					this.confessionQueryObj.total = res.data.data.total;
					this.confessionWallArray = [...this.confessionWallArray, ...res.data.data.records];
				} else {
					this.confessionWallArray = []
					this.confessionQueryObj.totalPageNumber = 0
					this.confessionQueryObj.pagesize = 0
					this.confessionQueryObj.total = 0
				}
				if (timeOutState) {
					setTimeout(() => {
						this.requestState = false;
						this.pullDownState=false
					}, 500)
				} else {
					this.requestState = false;
					this.pullDownState=false
				}
			},
			// // 专业交流
			async thePhenixData(timeOutState = true) {
				this.requestState = true;
				// 分页节流阀开启
				// this.isloading = true;
				const {
					data: res
				} = await uni.$http.get(
					`/ym_server/IntactArticle/4321519823581335552?page=${this.thePhenixQueryObj.pagenum}`
				);
				if (res.code === 200 && res.data.data.records) {
					this.thePhenixQueryObj.totalPageNumber = res.data.data.pages;
					this.thePhenixQueryObj.pagesize = res.data.data.size;
					this.thePhenixQueryObj.total = res.data.data.total;
					this.thePhenixArray = [...this.thePhenixArray, ...res.data.data.records];
				} else {
					this.thePhenixArray = []
					this.thePhenixQueryObj.totalPageNumber = 0
					this.thePhenixQueryObj.pagesize = 0
					this.thePhenixQueryObj.total = 0
				}
				if (timeOutState) {
					setTimeout(() => {
						this.requestState = false;
						this.pullDownState=false
					}, 500)
				} else {
					this.requestState = false;
					this.pullDownState=false
				}
			},
			// tab切换事件
			getClickIndexHandle(id, indexs) {
				if(indexs === this.active && this.active===0){
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.communityInitialArray=[]
					this.communityQueryObj.pagenum=1
					this.communityQueryObj.totalPageNumber=0
					this.communityQueryObj.pagesize=0
					this.communityQueryObj.total=0
					this.communityInitialData()
				}else if(indexs === this.active && this.active===1){
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.myAttentionArray=[]
					this.myAttentionQueryObj.pagenum=1
					this.myAttentionQueryObj.totalPageNumber=0
					this.myAttentionQueryObj.pagesize=0
					this.myAttentionQueryObj.total=0
					this.thePhenixQueryObjData()
				}else if(indexs === this.active && this.active===2){
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.confessionWallArray=[]
					this.confessionQueryObj.pagenum=1
					this.confessionQueryObj.totalPageNumber=0
					this.confessionQueryObj.pagesize=0
					this.confessionQueryObj.total=0
					this.confessionWallData()
				}else if(indexs === this.active && this.active===3){
					this.pullDownState = true
					this.requestState=true
					this.pagingState=false
					this.thePhenixArray=[]
					this.thePhenixQueryObj.pagenum=1
					this.thePhenixQueryObj.totalPageNumber=0
					this.thePhenixQueryObj.pagesize=0
					this.thePhenixQueryObj.total=0
					this.thePhenixData()
				}
				this.active = indexs
			}
		},
	};
</script>
<style lang="scss">
	.noData {
		width: 100%;
		text-align: center;
		padding: 40upx 0upx;
		color: #AEAEAE;
		font-size: 24upx;
		border-top:solid #EEF2F4 1px;
	}


	.noAttention {
		width: 100%;
		text-align: center;
		line-height: 200upx;
		color: #AEAEAE;
	}

	.paging {
		width: 100%;
		margin: 20upx 0upx;
		text-align: center;
		color: #AEAEAE;
		font-size: 24upx;
	}

	.communitybox {
		// width: 696upx;
		// max-width: 696upx;
		margin: auto;
	}
	.content{
		padding:0upx 32upx;
		box-sizing:border-box;
	}
</style>
